<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane :label="tab.name" :name="tab.value" v-for="(tab, index) in tabList" :key="index">
      <component
        :is="tab.component"
        @handleTabs="handleTabs"
        :ref="goTomailRef"
        @updateGoMailData="updateGoMailData"
        v-if="activeName === tab.value"
      />
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import { ref, computed } from 'vue';
import OrderTable from '../components/OderTable.vue';
import GoTomail from '../components/GoTomail.vue';
import MailRecord from '../components/MailRecord.vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const activeName = ref(1);
const route = useRoute();
const goTomailRef = ref();
const handleTabs = (name) => {
  activeName.value = name;
  // goTomailRef.value.getPcblist();
};

activeName.value = Number(route.query.recordType) || 1;

const tabList = computed(() => [
  {
    name: '待邮寄清单',
    value: 1,
    component: OrderTable,
  },
  {
    name: t('om.gotothemail'),
    value: 2,
    component: GoTomail,
  },
  {
    name: '邮寄记录',
    value: 3,
    component: MailRecord,
  },
]);

const updateGoMailData = () => {
  goTomailRef.value.getPcblist();
  goTomailRef.value.getBomlist();
};
</script>
